<template>
  <div>
      <input type="search" placeholder="请搜索商品">
      <span>
         <router-link to="/XiaoXi" >
              <img src="../../assets/xiaoxi.png" alt="">
          <span class="spans">99</span>
         </router-link>
      </span>
  </div>
</template>

<script>
export default {
    name:'SearchOne',
   
}
</script>

<style lang="less" scoped>
    div{
        position: relative;
        display: flex;
        align-items: center;
        padding:.5rem .625rem ;
        background: rgb(255, 255, 255);
        input{
        width: 83%;
        height: 1.875rem;
        line-height: 1.875rem;
        text-align: center;
        font-size: 0.8rem;
        border: 2px solid coral;
        border-radius: 5px;
        background:url(../../assets/sousuo.png)no-repeat ;
        background-size: 1.9rem;
        background-position: 28%;
    }
    span{
        
        img{
        width: 1.7rem;
        height: 1.7rem;
        display: inline-block;
        margin: 0 0 0 0.7rem;
      }
      .spans{
          font-size: 0.5rem;
          background: rgb(233, 134, 98);
          color: rgb(247, 247, 247);
          width: 1.5rem;
          text-align: center;
          border-radius: 10px;
          position: absolute;
          right: 0.7rem;
          top: 0.3rem;
      }
    }
}
</style>
